<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				/*
				 * jQuery对象本质就是一个数组，数组中包含了多个dom对象
				 * 遍历jQuery对象，获取数组中的每一个dom对象
				 */
				
				//获取所有的li标签
				var $lis = $("li");
				/*
				 * jQuery对象的第一种遍历方式，使用for循环
				 */
				/*for(var i = 0;i < $lis.length;i ++){
					alert(jQuery对象[i]);
				}*/
				for(var i = 0;i < $lis.length;i ++){
//					alert($lis[i].innerHTML);
//					alert(#($lis[i]).html());
				}
				
				
				/*
				 * jQuery对象的第二种方式：使用jQuery对象调用each函数
				 * 格式：
				 * jQuery对象.each(function(index,element){
				 * 	alert(element);
				 * })
				 * 参数：
				 * index:jQuery数组的索引(0,1,2,...)
				 * element:jQuery对象中的元素
				 * 
				 */
				$lis.each(function(index,element){
					//alert(index);//0、1、2、3、4
					//alert(element.innerHTML);
//					alert($(element).html());
				});
				/*
				 * jQuery对象中的第三种遍历方式：使用jQuery全局函数each、
				 * 格式：
				 * jQuery.each(jQuery对象，function(index,element){
				 * 	alert(element);
				 * });
				 * 参数：
				 * index:jQuery数组的索引
				 * element:jQuery对象中的元素
				 
				 */
				$.each($lis,function(index,element){
					//alert(index);
					//alert(element.innerHTML);
//					alert($(element).html());
				});
				/*
				 * jQuery对象的第四种遍历方式：使用增强for循环,jQuery版本为3.0以上
				 * 
				 * 格式：
				 * for(var 变量 of jQuery对象){
				 * 		alert(变量);
				 * }
				 * 变量：for循环会一次获取jQuery对象中的dom对象，
				 * 
				 */
				for(var e of $lis){
					//alert(e.innerHTML);
					alert($(e).html());
				}
			});
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
			<li>四川</li>
			
		</ul>
	</body>
</html>
